<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: rgb(60, 60, 70);
            display: flex;
            justify-content: center;
        }

        .a {
            position: relative;
            top: 250px;
            width: 300px;
            display: flex;
            justify-content: center;
            margin: 0 30px;
        }

        .c,
        .b {
            font: 900 100px '';
            line-height: 150px;
            position: absolute;
            color: brown;
            top: 0;
            transition: .4s;
        }

        .c {
            /* 裁剪文字的上半部分 括号里的四个值分别是top right bottom left */
            clip-path: inset(49% 0 0 0);
        }

        .b {
            clip-path: inset(1% 0 50% 0);
        }

        .a:hover .b,
        .a:hover .c {
            /* 移动向上和向下各是-30px和30px */
            top: calc(var(--i)*1px);
        }

        .a:hover .d {
            opacity: 1;
        }

        .d {
            text-decoration: none;
            color: aqua;
            font: 600 30px '';
            line-height: 150px;
            opacity: 0;
            transition: .3s;
        }
    </style>
</head>

<body>
    <div class="a">
        <div class="b" style="--i:-30">AAA</div>
        <div class="c" style="--i:30">AAA</div>
        <a href="#" class="d">点赞/Give a link</a>
    </div>
    <div class="a">
        <div class="b" style="--i:-30">BBB</div>
        <div class="c" style="--i:30">BBB</div>
        <a href="#" class="d">关注/Focus on</a>
    </div>
    <div class="a">
        <div class="b" style="--i:-30">CCC</div>
        <div class="c" style="--i:30">CCC</div>
        <a href="#" class="d">收藏/Collection</a>
    </div>
</body>

</html>